<html>
    <head>
        <title>Test</title>
        <style>

#sidepanel {
  position:absolute;
  top:0;
  right:0;
  background: gold;
  padding:1em;
}

        </style>
        <script type="text/tiscript">

include "sciter:reactor.tis";
include "portal.tis";

class Main : Reactor.Component {

  this var sidepanel;
  this var counter = 0;

  function this(props,kids) {
    if(!this.sidepanel)
      this.sidepanel = Reactor.createPortal(this,$(div#sidepanel));
  }

  event click $(button.portal.up) { 
    this.update {counter: this.counter + 1};
    return true;
  }
  event click $(button.portal.down) { 
    this.update {counter: this.counter - 1}; 
    return true;
  }

  event change $(input) (evt,input){
    this.update {counter: input.value}; 
  }

  function render() {
    // render portal portion
    this.sidepanel(<content>
      <p>That is a "portal" element,<br/>
         rendered outside of host element.</p>
      <p>Counter: {this.counter} </p> 
      <button.portal.up>+</button>
      <button.portal.down>-</button>
    </content>);
    // render itself
    return <main> counter: <input|integer :value={this.counter} step="1"/> </main>;
  }

}
        </script>
    </head>
    <body>

     <reactor|Main />

     <div#sidepanel />

    </body>
</html>